<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport"
	      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
</head>
<body>
<script src="d3.js"></script>
<script>
	//准备一份数据
	let data = [11,22,33,66,44,27];

	let width = 400;
	let height = 400;

	let padding = {
		left:20,
	    top:20,
	    bottom:20,
	    right:20
	}

	//创建svg元素
	let svg = d3.select("body").append("svg").attr("width",width).attr("height",height);

	//创建x\y轴刻度
	let xScale = d3.scaleBand().domain([".net","php","python","go","node.js","java"])
	  .rangeRound([0,width-padding.left]);
	let xAxis = d3.axisBottom(xScale);//把x轴添加到底部

	let yScale = d3.scaleLinear().domain([0,d3.max(data)]).range([(height-padding.top-padding.bottom),0]);
	let yAxis = d3.axisLeft(yScale);

	svg.append("g")
	  .attr("transform","translate("+padding.left+","+(height-padding.top) +")")
	  .call(xAxis);//把x轴添加到svg
	svg.append("g")
	  .attr("transform","translate("+padding.left+","+padding.bottom+")")
	  .call(yAxis);

	//根据数据填充
	svg.selectAll("rect")
	  .data(data)
	  .enter()
	  .append("rect")
	  .attr("transform",`translate(${padding.left},${padding.top})`)
	  .attr("fill","deeppink")
	  .attr("width",xScale.step())
	  .attr("height",function (h) {
	   return height-padding.top-padding.bottom-yScale(h);
	  })
	//设置每个rect X值及y值
	  .attr("x",function (h,index) {
	    return index*xScale.step();
	  })
	  .attr("y",function (h) {
	    return yScale(h);
	  })

</script>
</body>
</html>